
import * as React from 'react';
import { Layers, Refresh, Plus, Minus, Radar } from '@icon-park/react';
import { makeClassNameList } from '../utils';
import SmartMapProvider from '../provider/SmartMapProvider';
import { MapTopic } from '../typings';
import { Button, Empty } from 'antd';
import { VerticalAlignBottomOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';

const SmartMapLegend = () => {

    const {
        layerManageDrawerOpen,
        setLayerManageDrawerOpen,
        zoom,
        handleSetMapZoom,
        handleResetMapStatus,
        checkedThirdPartyLayerList
    } = React.useContext(SmartMapProvider);

    const [closed, setClosed] = React.useState(false);

    const renderLegenIcon = (layer: MapTopic) => {
        const themeColor = JSON.parse(layer.styleConfig)['themeColor']
        switch (layer.layerType) {
            case 'shape':
                return (
                    <div
                        className='legend-icon-shape'
                        style={{ backgroundColor: themeColor }}
                    >
                    </div>
                )
                break;
            case 'line':
                return (
                    <div
                        className='legend-icon-line'
                        style={{ backgroundColor: themeColor }}
                    >
                    </div>
                )
                break;
            case 'symbol':
                return (
                    <div
                        className='legend-icon-symbol'
                        style={{ backgroundColor: themeColor }}
                    >
                    </div>
                )
                break;
        }
    }

    const renderMapLegendItem = (layer: MapTopic, index: number) => {
        return (
            <div
                key={index + ''}
                className='flex-row smart-map-legend-item'
            >
                <div className='flex-row smart-map-legend-item-icon'>
                    {
                        renderLegenIcon(layer)
                    }
                </div>
                <div className='single-line-text'>{layer.name}</div>
            </div>
        )
    };

    return (
        <div className="flex-col smart-map-legend-box">
            <div className="flex-row smart-map-legend-box-title">
                <span>图例</span>
                <Button
                    type={'text'}
                    onClick={() => setClosed(!closed)}
                    icon={closed ? <VerticalAlignTopOutlined /> : <VerticalAlignBottomOutlined />}
                    size={'small'}
                />
            </div>
            <div className={
                makeClassNameList([
                    'flex-row smart-map-legend-box-content',
                    closed ? 'hide' : 'show'
                ])
            }>
                {
                    checkedThirdPartyLayerList && checkedThirdPartyLayerList.length ?
                        checkedThirdPartyLayerList.map((ele, index) => {
                            return renderMapLegendItem(ele, index)
                        })
                        :
                        <div
                            className='flex-col'
                            style={{
                                width: '100%',
                                height: '100%',
                                justifyContent: 'center',
                                alignItems: 'center',
                                paddingBottom: '20%'
                            }}
                        >
                            <Empty
                                description={"暂无地理图层"}
                            />
                        </div>
                }
            </div>
        </div>
    )
}


export default SmartMapLegend;